<script setup lang="ts">
import { ElForm, ElFormItem, ElInput, ElSelect, ElOption, ElDatePicker, ElButton, ElTable, ElTableColumn } from 'element-plus'
import { ContentWrap } from '@/components/ContentWrap'
import { useI18n } from '@/hooks/web/useI18n'
import { ref, reactive } from 'vue'
import { queryRoleApi } from '@/api/role'
import type { QueryRoleParamsType, QueryRoleType, RoleType } from '@/api/role/types'
import { formatToDateTime } from '@/utils/dateUtil'
import { useUserStore } from '@/store/modules/user'
defineOptions({
  name: 'Menu111'
})

const { t } = useI18n()

const loading = ref<boolean>(true)

const userStore = useUserStore()

const queryRoleData = ref<QueryRoleType | undefined>(undefined)
const roleListData = ref<Array<RoleType> | undefined>([])

const requestQueryRoleApi = async () => {
  const params: QueryRoleParamsType = {}
  const res = await queryRoleApi(params)
  if (res.code == 1) {
    queryRoleData.value = res.data
    roleListData.value = res.data.list
  }
  loading.value = false
}

requestQueryRoleApi()

const text = ref('')

const formInline = reactive({
  user: '',
  region: '',
  date: ''
})

const onSubmit = () => {
  console.log('submit!')
}

import type { TableInstance } from 'element-plus'

interface User {
  id: number
  date: string
  name: string
  address: string
}

const multipleTableRef = ref<TableInstance>()
const multipleSelection = ref<User[]>([])

const selectable = (row: User) => ![1, 2].includes(row.id)
const toggleSelection = (rows?: User[], ignoreSelectable?: boolean) => {
  if (rows) {
    rows.forEach((row) => {
      multipleTableRef.value!.toggleRowSelection(row, undefined, ignoreSelectable)
    })
  } else {
    multipleTableRef.value!.clearSelection()
  }
}
const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val
}
</script>

<template>
  <ContentWrap :title="t('levelDemo.menu')" :loading="loading">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="菜单">
        <el-input v-model="formInline.user" placeholder="请输入菜单" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit" v-if="userStore.getUserInfo?.userInfo?.type == 1 || userStore.getUserInfo?.userInfo?.type == 2">查询</el-button>
        <el-button type="primary" @click="onSubmit" v-if="userStore.getUserInfo?.userInfo?.type == 1 || userStore.getUserInfo?.userInfo?.type == 2">添加</el-button>
        <el-button type="danger" @click="onSubmit" v-if="userStore.getUserInfo?.userInfo?.type == 2">删除</el-button>
      </el-form-item>
    </el-form>

    <el-table ref="multipleTableRef" :data="queryRoleData?.list" style="width: 100%; height: calc(100vh - 320px)" :border="true" @selection-change="handleSelectionChange">
      <el-table-column type="selection" :selectable="selectable" width="55" />
      <el-table-column property="meta.icon" label="图标" />
      <el-table-column property="meta.title" label="菜单名字" />
      <el-table-column property="name" label="组件名字" />
      <el-table-column property="path" label="路径" />
      <el-table-column property="component" label="组件路径" />
      <el-table-column property="redirect" label="重定向路径" />
      <el-table-column label="创建时间">
        <template #default="scope">{{ formatToDateTime(scope.row.createtime * 1000, 'YYYY-MM-DD HH:ss') }}</template>
      </el-table-column>
    </el-table>
  </ContentWrap>
</template>
